<template>
  <el-dialog title="历史售卖" :visible.sync="visible" width="70%">
    <div class="app-container mod-hot-search">
      <!-- 搜索相关区域 -->
      <div class="filter-container">
        <el-form :inline="true" :model="pageQuery" class="demo-form-inline">
          <el-form-item label="货柜编号">
            <el-input
              v-model="pageQuery.title"
              size="mini"
              placeholder="请输入集合编号"
            />
          </el-form-item>
          <el-form-item label="交易时间">
            <el-date-picker
              v-model="pageQuery.time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="商品类型">
            <el-select
              v-model="pageQuery.status"
              size="mini"
              placeholder="请选择商品类型"
              clearable
            >
              <el-option label="全部" value="0" />
              <el-option label="白酒" value="1" />
              <el-option label="红酒" value="2" />
              <el-option label="啤酒" value="3" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-search"
              @click="getPage()"
              >查询</el-button
            >
            <el-button
              size="mini"
              icon="el-icon-delete"
              @click="clearSearchInfo()"
              >清空</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <!-- 列表相关区域 -->
      <el-table
        v-loading="pageLoading"
        :data="pageVO.list"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <!-- 货柜编号 -->
        <el-table-column label="货柜编号" prop="title" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.title }}</span>
          </template>
        </el-table-column>
        <!-- 类型 -->
        <el-table-column label="类型" prop="title" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.title }}</span>
          </template>
        </el-table-column>
        <!-- 所属商品 -->
        <el-table-column
          label="所属商品"
          prop="createTime"
          width="250"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.createTime }}</span>
          </template>
        </el-table-column>
        <!-- 售价 -->
        <el-table-column label="售价" prop="seq" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.seq }}</span>
          </template>
        </el-table-column>
        <!-- 销量 -->
        <el-table-column label="销量" prop="seq" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.seq }}</span>
          </template>
        </el-table-column>
        <!-- 销售日期 -->
        <el-table-column label="销售日期" prop="createTime" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.createTime }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页条 -->
      <pagination
        v-show="pageVO.total > 0"
        :total="pageVO.total"
        :page.sync="pageQuery.pageNum"
        :limit.sync="pageQuery.pageSize"
        @pagination="getPage()"
      />
    </div>
  </el-dialog>
</template>
<script>
import permission from "@/directive/permission/index.js";
import Pagination from "@/components/Pagination";
import * as api from "@/api/selfoperated/index";
export default {
  name: "",
  components: { Pagination },
  directives: { permission },
  data() {
    return {
      visible: false,
      // 查询的参数
      pageQuery: {
        pageSize: 10,
        pageNum: 1,
      },
      // 返回参数
      pageVO: {
        list: [], // 返回的列表
        total: 0, // 一共多少条数据
        pages: 0, // 一共多少页
      },
      // loading
      pageLoading: true,
      barCounterId: ''
    };
  },
  mounted() {
  },
  methods: {
    init(id) {
      this.visible = true;
      this.barCounterId = id
      this.getPage();
    },
    getPage() {
      this.pageLoading = true;
      api.search_order({ ...this.pageQuery, barCounterId: this.barCounterId }).then((pageVO) => {
        this.pageVO = pageVO;
        this.pageLoading = false;
      });
    },
    clearSearchInfo() {
      // 若请求参数某项没值，则不传此参数
      this.pageQuery.pageNum = 1;
      this.pageQuery.pageSize = 10;
      this.pageQuery.title = null;
      this.pageQuery.content = null;
      this.pageQuery.status = null;
      this.pageQuery.shopId = null;
      this.getPage();
    },
  },
};
</script>
  
  <style lang="scss" scoped>
</style> 